{% load i18n %}
<style>
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 10%;
    
    width: 1000px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }	
</style>
<div id="nav_featured">	
<ul>
        <li>
            <a id="nav-relative-first" {% if nav_relative_url_list.first_url %}{% else %}style="display:none;"{% endif %} class="nav-relative-first" href="/{{nav_relative_url_list.first_url}}{% ifequal nav_context.nav_mode "type" %}{% if nav_context.type %}/type/{{nav_context.type}}{% endif %}{% endifequal %}{% ifequal nav_context.nav_mode "book" %}{% if nav_context.book %}/book/{{nav_context.book}}{% endif %}{% endifequal %}"><img src="/assets/nav-first.png" alt="first" border="0"></a>
			
			<span id="nav-relative-first-tip" style="display:none;" >
			{{nav_relative_url_list.blog_references.first_url.title}}<br>
			<img src="/rpc/episodethumb/{{nav_relative_url_list.first_url}}" title="{{nav_relative_url_list.blog_references.first_url.title}}">
			</span>
        </li>

		
        <li>
            <a id="nav-relative-previous" {% if nav_relative_url_list.previous_url %}{% else %}style="display:none;"{% endif %} class="nav-relative-previous" href="/{{nav_relative_url_list.previous_url}}{% ifequal nav_context.nav_mode "type" %}{% if nav_context.type %}/type/{{nav_context.type}}{% endif %}{% endifequal %}{% ifequal nav_context.nav_mode "book" %}{% if nav_context.book %}/book/{{nav_context.book}}{% endif %}{% endifequal %}"><img src="/assets/nav-previous.png" alt="previous" border="0"></a>
			<span id="nav-relative-previous-tip" style="display:none;">
			{{nav_relative_url_list.blog_references.previous_url.title}}<br>
			<a href="/{{nav_relative_url_list.previous_url}}{% ifequal nav_context.nav_mode "type" %}{% if nav_context.type %}/type/{{nav_context.type}}{% endif %}{% endifequal %}{% ifequal nav_context.nav_mode "book" %}{% if nav_context.book %}/book/{{nav_context.book}}{% endif %}{% endifequal %}" 
			title="{{nav_relative_url_list.blog_references.previous_url.title}}"><img src="/rpc/episodethumb/{{nav_relative_url_list.previous_url}}"  title="{{nav_relative_url_list.blog_references.previous_url.title}}"></a>
			</span>
        </li>

<script type="text/javascript">
	$(document).ready(function(){
		$('#episode-menu').jqm(); 
        $("#go-menu").click(function(){
			$('#episode-menu').jqmShow();
        });			
		$("#go-menu").qtip({
			content: $($("#go-menu-tip")).html()
		});		
	});
</script>


		<li>
			<input type="button" value="more comics..." id="go-menu"/>
			<span id="go-menu-tip" style="display:none;">Choose a Comic by Episode, Book, and Chapter</span>
		</li>

		
        <li>
            <a id="nav-relative-next" {% if nav_relative_url_list.next_url %}{% else %}style="display:none;"{% endif %} class="nav-relative-next" href="/{{nav_relative_url_list.next_url}}{% ifequal nav_context.nav_mode "type" %}{% if nav_context.type %}/type/{{nav_context.type}}{% endif %}{% endifequal %}{% ifequal nav_context.nav_mode "book" %}{% if nav_context.book %}/book/{{nav_context.book}}{% endif %}{% endifequal %}"><img src="/assets/nav-next.png" alt="next" border="0"></a>
			<span id="nav-relative-next-tip"  style="display:none;">
			{{nav_relative_url_list.blog_references.next_url.title}}<br>
			<img src="/rpc/episodethumb/{{nav_relative_url_list.next_url}}"  title="{{nav_relative_url_list.blog_references.next_url.title}}">
			</span>
        </li>
				
        <li>
            <a id="nav-relative-latest" {% if nav_relative_url_list.latest_url %}{% else %}style="display:none;"{% endif %} class="nav-relative-latest" href="/{{nav_relative_url_list.latest_url}}{% ifequal nav_context.nav_mode "type" %}{% if nav_context.type %}/type/{{nav_context.type}}{% endif %}{% endifequal %}{% ifequal nav_context.nav_mode "book" %}{% if nav_context.book %}/book/{{nav_context.book}}{% endif %}{% endifequal %}"><img src="/assets/nav-latest.png" alt="latest" border="0"></a>
			<span id="nav-relative-latest-tip" style="display:none;">
			{{nav_relative_url_list.blog_references.latest_url.title}}<br>
			<img src="/rpc/episodethumb/{{nav_relative_url_list.latest_url}}"  title="{{nav_relative_url_list.blog_references.latest_url.title}}">
			</span>
        </li>

{% if show_meta_nav %}
<script type="text/javascript">
	$(document).ready(function(){
			$("#go-fullscreen").click(function(){				
				var episode_value = $('#episodeList').val();
{% if fullscreen %}
				window.location.href = "/" + episode_value + "/jump/";
{% else %}
				window.location.href = "/" + episode_value + "/jump/type/comic/fullscreen/";
{% endif %}				
			});
			
			$("#go-comment").click(function(){				
{% if featured %}
				var episode_value = "{{featured.permalink}}";
{%else%}
{% if blog %}
				var episode_value = "{{blog.permalink}}";
{%endif%}
{%endif%}			
			
				var url = "/" + episode_value + "#comment-form";
				window.location.href = url;				
			});
			$("#go-share").click(function(){								
{% if featured %}
				var episode_title = "{{featured.title}}";
{%else%}
{% if blog %}
				var episode_title = "{{blog.title}}";
{%endif%}
{%endif%}
				var url = "http://www.addtoany.com/share_save?linkurl=" + window.location.href + "&linkname={{BLOG.title}}: " + episode_title;
				window.location.href = url;
			});
			
			/*
			$("#go-print").click(function(){				
{% if featured %}
				var episode_title = "{{featured.title}}";
{%else%}
{% if blog %}
				var episode_title = "{{blog.title}}";
{%endif%}
{%endif%}
				window.location.href = "/store/#buyprint-"+episode_title;
			});
			*/
			$("#go-fullscreen").qtip({
				content: $($("#go-fullscreen-tip")).html()
			});
			$("#go-comment").qtip({
				content: $($("#go-comment-tip")).html()
			});		
			$("#go-share").qtip({
				content: $($("#go-share-tip")).html()
			});		
			
			/*
			$("#go-print").qtip({
				content: $($("#go-print-tip")).html()
			});
			*/		
			
		}
	)	
</script>		
<ul>	
	<li>

{% if fullscreen %}
		<input type="button" value="blog view" id="go-fullscreen"/>
		<span id="go-fullscreen-tip" style="display:none;">Regular comic-blog layout</span>
{% else %}
		<input type="button" value="comic view" id="go-fullscreen"/>
		<span id="go-fullscreen-tip" style="display:none;">Experimental full-screen comic layout</span>
{% endif %}

	</li>
	<li>
		<input type="button" value="comment" id="go-comment"/>
		<span id="go-comment-tip" style="display:none;">Comment on this episode and see other comments</span>
	</li>
	<li>
		<input type="button" value="like/share" id="go-share"/>
		<span id="go-share-tip" style="display:none;">Tell others about this episode via AddtoAny</span>
	</li>	
	<!--
	<li>
		<input type="button" value="$ buy print" id="go-print"/>
		<span id="go-print-tip" style="display:none;">Jump to the first episode in the selected chapter</span>
	</li>	
	-->
</ul>		

{% endif %}

		
</ul>













<div id="episode-menu" class="jqmWindow">
{% if bookList %}
<ul>
<script type="text/javascript">
	$(document).ready(function(){
			$("#go-book").qtip({
				content: $($("#go-book-tip")).html()
			});		
		
			$("#go-book").click(function(){
				var book_value = $('#bookList').val();
				window.location.href = "/filter/book/" + book_value + "/sort/date/jump/";
			});
			
			$("#bookList").change(function(){
				url = "/filter/book/" + $("#bookList").val() +"/sort/date/jump/format/json/";
				$.getJSON(url,{},function(response){
					var result = "";
					for(var i = 0; i < response["chapterList"].length; i++) {
						result += '<option value="' + response["chapterList"][i].title + '">' + response["chapterList"][i].title + '</option>';
					}
					$("#chapterList").html(result);
					$('#chapterList option:first').attr('selected', 'selected');
					
					result = "";
					for(var i = 0; i < response["episodeList"].length; i++) {
						result += '<option value="' + response["episodeList"][i].permalink + '">' + response["episodeList"][i].title + '</option>';
					}
					$("#episodeList").html(result);
					$('#episodeList option:first').attr('selected', 'selected');					
				})
			});
		});
</script>
<ul class="jumpnav">
    	<li>{% trans "browse by book" %}</li>
        <li>
        {% if bookList %}
        <select id="bookList">
        <!--
        <option value="all">all books</option>
		-->
        {% for book in bookList %}
        <option value="{{book.title}}" 
		{% if featured %}{% ifequal  featured.book book.title %}selected{% endifequal %}
		{%else%}
		{% if blog %}{% ifequal blog.book book.title %}selected{% endifequal %}{%endif%}
		{%endif%}
		>{{ book.title }} ({{book.entrycount}})
        </option>
        {% endfor %}
        </select><input type="button" value="jump" id="go-book"/>
		<span id="go-book-tip" style="display:none;">Jump to the first episode in the selected book</span>
        {% endif %}
        </li>
</ul>		
{% endif %}
{% if chapterList %}
<script type="text/javascript">
	$(document).ready(function(){
			$("#go-chapter").qtip({
				content: $($("#go-chapter-tip")).html()
			});		
			
			$("#go-chapter").click(function(){				
		        var chapter_value = $('#chapterList').val();
				var book_value = $('#bookList').val();
				newlocation = "/filter/";
				if (String(book_value).length > 0)
				{
					newlocation += "book/" + book_value + "/";
				}
				
		        window.location.href = newlocation + "chapter/" + chapter_value + "/sort/date/jump/";
				
			});
		}
	);		
</script>
<ul class="jumpnav">
    	<li>{% trans "chapter" %}</li>
        <li>
        {% if chapterList %}
        <select id="chapterList">
        {% for chapter in chapterList %}
        <option value="{{chapter.title}}" 
		{% if featured %}{% ifequal  featured.chapter chapter.title %}selected{% endifequal %}
		{%else%}
		{% if blog %}{% ifequal  blog.chapter chapter.title %}selected{% endifequal %}{%endif%}
		{%endif%}		
		>{{ chapter.title }} ({{chapter.entrycount}})
        </option>
        {% endfor %}
        </select><input type="button" value="jump" id="go-chapter"/>
		<span id="go-chapter-tip" style="display:none;">Jump to the first episode in the selected chapter</span>
        {% endif %}
        </li>
</ul>		
{% endif %}

{% if episodeList %}
<script type="text/javascript">
	$(document).ready(function(){
			$("#go-episode").qtip({
				content: $($("#go-episode-tip")).html()
			});		
			$("#go-episode").click(function(){				
				var episode_value = $('#episodeList').val();;
				window.location.href = "/" + episode_value + "/jump/";				
			});

			
		}
		
	);		
</script>
<ul class="jumpnav">
    	<li>{% trans "episodes" %}</li>
        <li>
        {% if episodeList %}
        <select id="episodeList">
        {% for episode in episodeList %}
        <option value="{{episode.permalink}}" 
		{% if featured %}{% ifequal  featured.title episode.title %}selected{% endifequal %}
		{%else%}
		{% if blog %}{% ifequal  blog.title episode.title %}selected{% endifequal %}{%endif%}		
		{%endif%}
		>{{ episode.title }}
        </option>
        {% endfor %}
        </select><input type="button" value="jump" id="go-episode"/>
		<span id="go-episode-tip" style="display:none;">Jump to the selected episode</span>

        {% endif %}
        </li>
</ul>		
{% endif %}
{% if bookList %}
</ul>
{% endif %}

<ul class="jumpnav-random">
	<li>
		random 		
	</li>
	<li>
		<a href="/filter/type/comic/random/" title="random comic episode">comic</a>
	</li>
	<li>
		<a href="/filter/type/post/random/" title="random blog entry">blog</a>
	</li>
</ul>
<!--
<ul>		
	<li>browse</li>
	<li>
		<input type="checkbox" value="filter-comics" id="filter-comics" {% if filter_comics %}checked{% endif %} />comic
	</li>
	<li>
		<input type="checkbox" value="filter-posts" id="filter-posts" {% if filter_posts %}checked{% endif %}/>blog
	</li>
</ul>
-->
</div>











</div>




